<template>
	<view>
		<navbar :tip="tip" title="我的收藏" :isback="true"></navbar>
		<view class="sousuo">
			<u-search placeholder="请输入学校名称" height='60rpx' bgColor='#fff' placeholderColor='#C6C6C6' v-model="keyword"
				@custom='custom'></u-search>
		</view>
		<view class="con">
			<view class="box" :style="{height:'calc(100vh - 44px - 60rpx - 16rpx - '+height+' - '+bheight+')'}">
				<view class="u-flex u-flex-y-center box__tab">
					<view class="u-flex u-flex-y-center" v-for="(item,index) in tablist" :key="index"
						@click="clicktab(index)">
						<view class="box__sx" :class="curtab==index?'active':''">
							{{item.name}}
						</view>
						<image class="box__sx__icon" :src="'/static/cxx/Polygon_'+(curtab==index?'6':'5')+'.png'"
							mode=""></image>
					</view>
				</view>
				<view class="" style="color: #C6C6C6;font-size: 19rpx;line-height: 40rpx;padding-left: 57rpx;">
					向左滑动 可取消收藏
				</view>
				<scroll-view scroll-y="true" style="height: calc(100% - 60rpx - 40rpx);" v-if="list.length>0"
					@scrolltolower='scrolltolower'>
					<view class="list">
						<u-swipe-action>
							<u-swipe-action-item :threshold='40' :options="item.options" v-for="(item, index) in list"
								:disabled="item.disabled" :key="index" @click="clickdel(item)">
								<view class="item" @click="navto('/pages/cschool/detail?id='+item.school.id)">
									<image src="" class="item__pic" mode=""></image>
									<view class="" style="flex: 1;">
										<view class="item__name">
											{{item.school.title}}
										</view>
										<view class="u-flex u-flex-y-center">
											<view class="item__tip" v-for="(item1,index1) in item.school.label_text"
												:key="index1">
												{{item1}}
											</view>
										</view>
										<view class="item__addr">
											<image src="/static/cxx/Vector(1).png" class="item__addr__icon" mode="">
											</image>
											{{item.school.address}}
										</view>
									</view>
									<image src="/static/cxx/Vector.png" class="item__more" mode=""></image>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
						<u-loadmore :status="status" />
					</view>
				</scroll-view>
				<u-empty v-else>
				</u-empty>
			</view>

		</view>
		<u-picker :show="show" @cancel='show=false' ref="uPicker" keyName='title' @confirm='confirm' :loading="loading"
			:columns="columns" @change="changeHandler" @on></u-picker>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				keyword: '',
				tablist: [{
						name: '全部',
					},
					{
						name: '省市',
					},
				],
				tip: '',
				page: 1,
				page_size: 10,
				curtab: 0,
				list: [],
				show: false,
				loading: false,
				columns: [],
				columnData: [],
				province_id: '',
				city_id: '',
				status: 'loadmore',
				total: 0,

			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		methods: {
			clickdel(item){
				let _this=this
				uni.showModal({
					title:'提示',
					content:'确定要删除该收藏？',
					success(r) {
						if(r.confirm){
							user.cancel_collect({school_id:item.school_id}).then(res=>{
								if(res.data.code==200){
									uni.$u.toast('删除成功')
									_this.page=1
									_this.list=[]
									_this.getlist()
								}
							})
						}
					}
				})
			},
			confirm(e) {
				if (e.value[1]) {
					if (e.value[0].title == e.value[1].title) {
						this.tablist[1].name = e.value[0].title
					} else {
						this.tablist[1].name = e.value[0].title + e.value[1].title
					}
				} else {
					this.tablist[1].name = e.value[0].title
				}
				this.list=[]
				this.page = 1
				this.curtab = 1
				this.province_id = e.value[0].id
				this.city_id = e.value[1] ? e.value[1].id : ''
				this.getlist()
				this.show = false
			},
			scrolltolower() {
				if (this.list.length == this.total) {
					return
				}
				this.status = 'loading';
				this.page++
				this.getlist()
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					// 模拟网络请求
					home.arealist({
						page: 1,
						page_size: 50,
						pid: e.value[0].id
					}).then(res => {
						if (res.data.code == 200) {
							picker.setColumnValues(1, res.data.data.data)
							this.loading = false
						}
					})
				}
			},
			custom() {
				this.page = 1
				this.list = []
				this.getlist()
			},
			clicktab(index) {
				if (index == 0) {
					this.page = 1
					this.curtab = 0
					this.keyword = ''
					this.province_id = ''
					this.city_id = ''
					this.list = []
					this.getlist()
				} else {
					this.show = true
				}
			},
			async getlist() {
				let res = await user.collect({
					page: this.page,
					page_size: this.page_size,
					school_name: this.keyword,
					province_id: this.province_id,
					city_id: this.city_id
				})
				if (res.data.code == 200) {
					this.list = [...this.list, ...res.data.data.data]
					this.total = res.data.data.pageInfo.total
					this.list.map(t => {
						t.disabled = false
						t.options = [{
							text: '删除',
						}]
					})
					if (this.list.length == this.total) this.status = 'nomore';
				}
			},
			async getaddr() {
				let res = await home.arealist({
					page: 1,
					page_size: 34,
					pid: 0
				})
				if (res.data.code == 200) {
					this.$set(this.columns, 0, res.data.data.data)
					home.arealist({
						page: 1,
						page_size: 50,
						pid: res.data.data.data[0].id
					}).then(res1 => {
						this.$set(this.columns, 1, res1.data.data.data)
					})
				}
			}
		},
		onLoad() {
			this.getlist()
			this.getaddr()
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_3122.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.top {
		padding: 40rpx 0 90rpx 64rpx;
		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 46rpx;
		color: #000000;
		line-height: 40rpx;
		position: relative;

		&__bg {
			width: 192.75rpx;
			height: 196.18rpx;
			position: absolute;
			top: 0;
			right: 118rpx;
		}
	}

	.sousuo {
		padding: 0 40rpx;
		position: relative;
		margin-bottom: 10rpx;

		/deep/.u-search__action {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #747474;
			line-height: 40rpx;
		}
	}

	.box {
		background: #F1F8FC;
		border-radius: 57rpx 57rpx 0rpx 0rpx;

		&__tab {
			height: 60rpx;
			padding: 0 55rpx;
		}

		&__sx {
			padding: 0 20rpx;
			height: 34rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			border: 2rpx solid #93B8F9;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #93B8F9;
			line-height: 40rpx;

			&__icon {
				margin-right: 35rpx;
				width: 21.3rpx;
				height: 17.55rpx;
				margin-left: 5rpx;
			}
		}

		.active {
			height: 38rpx;
			background: #84b1ff;
			color: #fff;
		}
	}

	.con {
		padding: 0 24rpx;
	}

	.list {
		padding: 0 22rpx 30rpx;
	}

	.sc {
		width: 91.6rpx;
		height: 91.6rpx;
		position: fixed;
		bottom: 300rpx;
		right: 20rpx;
	}

	.fx {
		width: 91.6rpx;
		height: 91.6rpx;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
	}

	/deep/.u-swipe-action-item {
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		box-shadow: 6rpx 8rpx 8rpx 0rpx #DEE2FF;
		margin-bottom: 9rpx;
	}

	.item {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx 48rpx 6rpx 26rpx;
		overflow: hidden;

		&__pic {
			width: 92rpx;
			height: 92rpx;
			background: #E4E4E4;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		&__name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 31rpx;
			color: #000000;
			line-height: 40rpx;
		}

		&__tip {
			padding: 0 16rpx;
			height: 28rpx;
			background: #84B1FF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #fff;
			line-height: 28rpx;
			margin-right: 10rpx;
		}

		&__addr {
			height: 40rpx;
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 15rpx;
			color: #A6A5A5;
			line-height: 40rpx;

			&__icon {
				width: 13.36rpx;
				height: 17.18rpx;
				margin-right: 5rpx;
			}
		}

		&__more {
			width: 17.18rpx;
			height: 32.44rpx;
			margin-top: 28rpx;
		}
	}
</style>